<script setup>
import OImage from "../setting/Images.vue";
import Color from "../setting/Color.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import { newRandomUid } from "@/utils";
import PrizePopupSelect from "../setting/PrizePopupSelect.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { top: 0, left: 15 },
  $size: { width: 345, height: 330 },
  $removeable: true,
  showBg: false,
  bgColor: "",
  zonePosition: { left: 10, top: 5 },
  zoneSize: { width: 325, height: 320 },
  showTaskBg: false,
  textPosition: { left: 5, top: 5 },
  textSize: { width: 315, height: 55 },
  taskBgColor: "#ffffff",
  taskSpace: 10,
  taskNameColor: "#000000",
  taskDescColor: "#ABAFB7",
  taskBtnTextColor:"#333",//任务按钮文字颜色
  btnImg1: "",
  btnImg2: "",
  btnImg3: "",
  btn1Size: { width: 100, height: 40 },
  btn2Size: { width: 100, height: 40 },
  btn3Size: { width: 100, height: 40 },
});

const formRef = ref();

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `TaskCard-${newRandomUid()}`;
    onChange();
  }
};

const onChange = (val, type) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else {
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
      }
    });
  });
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :disabled="disabled"
    label-width="auto"
  >
    <PrizePopupSelect v-model="detail" :group="group" @change="onChange" />
    <AlphaColor v-model="detail.bgColor" name="区域背景色" @change="onChange" />
    <AlphaColor
      v-model="detail.taskBgColor"
      name="任务背景色"
      @change="onChange"
    />
    <Color
      v-model="detail.taskNameColor"
      name="任务名称文字颜色"
      @change="onChange"
    />
    <Color
      v-model="detail.taskDescColor"
      name="任务描述文字颜色"
      @change="onChange"
    />
    <Color
      v-model="detail.taskBtnTextColor"
      name="任务按钮文字颜色"
      @change="onChange"
    />
    <Slider
      v-model="detail.taskSpace"
      name="任务间隔"
      :min="0"
      :max="50"
      @change="onChange"
    />
    <OImage
      v-model="detail.bgImg"
      v-model:size="detail.$size"
      v-model:show="detail.showBg"
      name="区域背景图"
      @change="onChange"
    />
    <OImage
      v-model="detail.taskBgImg"
      v-model:show="detail.showTaskBg"
      name="任务背景图"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg1"
      v-model:size="detail.btn1Size"
      name="未完成任务按钮"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg2"
      v-model:size="detail.btn2Size"
      name="待领奖任务按钮"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg3"
      v-model:size="detail.btn3Size"
      name="已完成任务按钮"
      @change="onChange"
    />
  </el-form>
</template>
